﻿<%@ Page Title="Promotion Engine -  Customer Grade" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="CustomerGrade.aspx.cs" Inherits="PromotionEngine.CustomerGrade" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        var oCustomerGrade = {};
        var isInsert = false;
        var grid;
        $(document).ready(function () {
            grid = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            type: "GET",
                            url: "CustomerGrade.aspx/GetODataCustomerGradeList",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        destroy: {
                            type: "GET",
                            url: "CustomerGrade.aspx/DeleteCustomerGrade",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        parameterMap: function (data, operation) {
                            if (operation === "destroy") {
                                return { gradeID: data.GradeID };
                            }
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true
                    },
                    type: "odata", //Important!!!!
                    schema: {
                        data: function (a) {
                            if (a.d != null) {
                                var data = a.d.Data;
                                return data;
                            }
                        },
                        total: "d.Count",
                        model: {
                            id: "GradeID",
                            fields: {
                                GradeID: { type: "string" },
                                GradeCode: { type: "string", validation: { required: true} },
                                GradeName: { type: "string", validation: { required: true} },
                                MinValue: { type: "number", validation: { required: true} },
                                PointFactor: { type: "number", validation: { required: true} },
                                PointCurrency: { type: "number", validation: { required: true} },
                                CompanyCode: { type: "string" },
                                CreatedUserID: { type: "string" },
                                CreatedDate: { type: "date" }
                            }
                        }
                    }
                },
                sortable: true,
                pageable: {
                    pageSize: 20,
                    refresh: true
                },
                filterable: true,
                reorderable: true,
                resizable: true,
                height: 450,
                selectable: "row",
                toolbar: [{ name: 'create', text: 'Add New Customer Grade' }, { name: 'excel'}],
                excel: {
                    fileName: "Customer Grade List.xlsx",
                    filterable: true,
                    allPages: true
                },
                batch: true,
                columns: [{ field: "GradeID", title: "ID", width: 80, hidden: true },
                            { field: "GradeCode", title: "Code", width: 100 },
                            { field: "GradeName", title: "Name" },
                            { field: "MinValue", title: "Min Value", width: 200, format: "{0:n}",type:"number", attributes: { style: "text-align:right;"}  },
                            { field: "PointFactor", title: "Point Factor", width: 200, format: "{0:n}",type:"number", attributes: { style: "text-align:right;"}  },
                            { field: "PointCurrency", title: "Point Currency", width: 200, format: "{0:n}",type:"number", attributes: { style: "text-align:right;"}  },
                            { field: "CompanyCode", title: "Company Code", hidden: true },
                              <%if (bool.Parse(HttpContext.Current.Session["IsAdmin"].ToString())){%>
                            { field: "CompanyName", title: "Company Name" },
                            <%}else{ %>
                             { field: "CompanyName", title: "Company Name",hidden: true },
                            <%} %>
                            { command: ["edit","destroy"], title: "Action", width: "200px"}]
                , editable: {
                    mode: "popup",
                    template: $("#template").html(),
                    confirmation: "Are you sure you want to remove this customer grade?"

                },
                edit: function (e) {
                    var editWindow = e.container.data("kendoWindow");
                        $('[name="GradeID"]').attr("readonly", true);
                    if (e.model.isNew()) {
                        e.container.data("kendoWindow").title('Add New Customer Grade');
                        $("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";
                        isInsert = true;
                    }
                    else {
                        e.container.data("kendoWindow").title('Edit Customer Grade');
                        isInsert = false;
                    }
                },
                remove: function (e) {
                },
                save: function (e) {
                    var that = this;
                    var num = 1;
                    var listTextBox = $("input:text");
                    for (var i = 0; i < listTextBox.length; i++) {
                        var name = listTextBox[i].name;
                        if (name.length > 0) {
                            oCustomerGrade[name] = $("[name=" + name + "]").val();
                        }

                    }
                    //Update or Insert Customer
                    $.ajax({
                        type: "POST",
                        url: "CustomerGrade.aspx/UpdateCustomerGrade",
                        data: JSON.stringify({
                            oCustomerGrade: JSON.stringify(oCustomerGrade),
                            isInsert: isInsert
                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            //Reload Data 
                            if (isInsert) {
                                grid.dataSource.read();
                            }
                        },
                        error: function (xhr, status, err) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                    this.refresh();
                }
            }).data("kendoGrid");
        });
    </script>
    <script type="text/x-kendo-template" id="template">  
     <div class="k-edit-label"   style="display: none;">
                <label for="GradeID">
                    ID</label></div>
            <div class="k-edit-field" data-container-for="GradeID"   style="display: none;">
                <input name="GradeID" class="k-input k-textbox" type="text" data-bind="value:GradeID"></div>
            <div class="k-edit-label">
                <label for="GradeCode">
                    Code</label></div>
            <div class="k-edit-field" data-container-for="GradeCode">
                <input name="GradeCode" class="k-input k-textbox" required="required" type="text"
                    data-bind="value:GradeCode"></div>
            <div class="k-edit-label">
                <label for="GradeName">
                    Name</label></div>
            <div class="k-edit-field" data-container-for="GradeName">
                <input name="GradeName" class="k-input k-textbox" required="required" type="text"
                    data-bind="value:GradeName"></div>
            <div class="k-edit-label">
                <label for="MinValue">
                    Min Value</label></div>
            <div class="k-edit-field" data-container-for="MinValue">
                <span class="k-widget k-numerictextbox"><span class="k-numeric-wrap k-state-default">
                    <input tabindex="0" class="k-formatted-value k-input" aria-disabled="false" aria-readonly="false"
                        style="display: inline-block;" type="text"><input name="MinValue" class="k-input"
                            role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="0"
                            style="display: none;" required="required" type="text" data-role="numerictextbox"
                            data-bind="value:MinValue" data-type="number"><span class="k-select"><span class="k-link"
                                style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Increase value"
                                    class="k-icon k-i-arrow-n" unselectable="on">Increase value</span></span><span class="k-link"
                                        style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Decrease value"
                                            class="k-icon k-i-arrow-s" unselectable="on">Decrease value</span></span></span></span></span><span
                                                class="k-invalid-msg" style="display: none;" data-for="MinValue"></span></div>
                                                 <div class="k-edit-label">
        <label for="PointFactor">
            Point Factor</label></div>
    <div class="k-edit-field" data-container-for="PointFactor">
        <span class="k-widget k-numerictextbox"><span class="k-numeric-wrap k-state-default">
            <input tabindex="0" class="k-formatted-value k-input" aria-disabled="false" aria-readonly="false"
                style="display: inline-block;" type="text"><input name="PointFactor" class="k-input"
                    role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="0"
                    style="display: none;" required="required" type="text" data-role="numerictextbox"
                    data-bind="value:PointFactor" data-type="number"><span class="k-select"><span class="k-link"
                        style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Increase value"
                            class="k-icon k-i-arrow-n" unselectable="on">Increase value</span></span><span class="k-link"
                                style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Decrease value"
                                    class="k-icon k-i-arrow-s" unselectable="on">Decrease value</span></span></span></span></span><span
                                        class="k-invalid-msg" style="display: none;" data-for="PointFactor"></span></div>
    <div class="k-edit-label">
        <label for="PointCurrency">
            Point Currency</label></div>
    <div class="k-edit-field" data-container-for="PointCurrency">
        <span class="k-widget k-numerictextbox"><span class="k-numeric-wrap k-state-default">
            <input tabindex="0" class="k-formatted-value k-input" aria-disabled="false" aria-readonly="false"
                style="display: inline-block;" type="text"><input name="PointCurrency" class="k-input"
                    role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="0"
                    style="display: none;" required="required" type="text" data-role="numerictextbox"
                    data-bind="value:PointCurrency" data-type="number"><span class="k-select"><span class="k-link"
                        style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Increase value"
                            class="k-icon k-i-arrow-n" unselectable="on">Increase value</span></span><span class="k-link"
                                style="-ms-touch-action: double-tap-zoom pinch-zoom;" unselectable="on"><span title="Decrease value"
                                    class="k-icon k-i-arrow-s" unselectable="on">Decrease value</span></span></span></span></span><span
                                        class="k-invalid-msg" style="display: none;" data-for="PointCurrency"></span></div>
            <div class="k-edit-label"  style="display: none;">
                <label for="CompanyCode">
                    Company Code</label></div>
            <div class="k-edit-field" data-container-for="CompanyCode"  style="display: none;">
                <input name="CompanyCode" class="k-input k-textbox" type="text" data-bind="value:CompanyCode"></div>
    </script>
    <div style="position: absolute; z-index: 0; margin-right: 8px;">
        <div id="grid">
        </div>
    </div>
   
</asp:Content>
